<template>
  <div class="app-container Index">
    <div class="top-box">
      <!-- 快速筛选 -->
      <div class="select">
        <comSelect
          @EventChange="changeSelectFn"
          :options="comSelectOptions"
        ></comSelect>
      </div>
      <!-- 查询 -->
      <div class="form">
        <ComForm
          :list="comForm"
          @EventReset="resetFn"
          @EventOnsubmit="queryFn"
        ></ComForm>
      </div>
      <!-- 批量操作 -->
      <div class="btn-box">
        <!-- <span class="title">批量操作</span>
        <el-button type="primary" plain size="mini" icon="el-icon-check"
          >批量通过</el-button
        > -->
      </div>
    </div>

    <ComTable
      :list="tableList"
      :modes="comTableMode"
      :pagination="paging"
      :config="comTableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <el-table-column
        #default="{ row }"
        :width="'210px'"
        class="operate"
        align="left"
        label="操作"
      >
        <!-- 按钮组 -->
        <!-- <template #default="{ row }">
      
          <comMb8Button :config="comMb8ButtonConfig_Table"
                        @handle="clickBtnGroup_Table(arguments, row)"></comMb8Button>
        </template> -->

        <template>
          <el-button
            @click="settlementFn(row, 1)"
            size="mini"
            plain
            v-if="row.status == 1"
            type="primary"
            v-hasPermi="['financial:pay:updateStatus']"
            >结算</el-button
          >
          <el-button
            size="mini"
            plain
            type="danger"
            @click="settlementFn(row, -1)"
            v-if="row.status == 1"
            v-hasPermi="['system:user:remove']"
            >报错</el-button
          >
          <el-button
            size="mini"
            @click="detailFn(row)"
            plain
            v-hasPermi="['financial:wageInfo:list']"
            >明细</el-button
          >
        </template>
      </el-table-column>
    </ComTable>
  </div>
</template>

<script>
import ComTable from "@/wss/components/comTable.vue";
import comSelect from "@/wss/components/comSelect.vue";
import ComForm from "@/wss/components/comForm.vue";
import comMb8Button from "@/wss/components/comMb8Button.vue";

import {
  getPayList,
  getPayGetInfo,
  getPayUpdateStatus,
} from "@/wss/api/financial/Accounting/pay.js";

export default {
  name: "Index",
  components: {
    ComTable,
    comSelect,
    ComForm,
    comMb8Button,
  },

  data() {
    return {
      // 动态生成下拉列表的筛选条件
      dynamicFilter: {},
      //------快速筛选------//
      comSelectOptions: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "",
            label: "所有状态",
          },
          {
            value: "1",
            label: "待出账",
          },
          {
            value: "-1",
            label: "报错",
          },
          {
            value: "2",
            label: "出账成功",
          },
        ],
      },
      //------From--------//
      comForm: {
        modes: [
          {
            placeholder: "请输入员工单号",
            formType: "input",
            label: "单号",
            mode: "orderNo",
            value: "",
          },
          {
            placeholder: "请选择结算类型",
            formType: "select",
            label: "结算类型",
            value: "",
            mode: "type",
            select: [
              {
                label: "全部",
                value: "",
              },
              {
                label: "专家",
                value: "专家",
              },
              {
                label: "运营",
                value: "运营",
              },
              {
                label: "客服",
                value: "客服",
              },
              {
                label: "财务",
                value: "财务",
              },
            ],
          },
          {
            placeholder: "请输入员工户名",
            formType: "input",
            label: "户名",
            mode: "name",
            value: "",
          },
          {
            placeholder: "请输账户昵称",
            formType: "input",
            label: "昵称",
            mode: "nickname",
            value: "",
          },
          {
            placeholder: "请输手机号",
            formType: "input",
            label: "手机号",
            mode: "phone",
            value: "",
          },

          {
            mode: "temp",
            placeholder: "",
            formType: "datePicker",
            label: "核算时间",
            pickerType: "daterange",
            rangeSeparator: "～",
            startPlaceholder: "开始月份",
            endPlaceholder: "结束月份",
          },
        ],
      },
      //------Table--------//
      comTableMode: [
        {
          type: "selection", //多选列
          width: "50%",
          align: "center",
        },
        {
          label: "单号",
          mode: "no",
          align: "center",
        },
        {
          label: "结算类型",
          mode: "type",
          align: "center",
          options: [
            {
              l: "工资提成",
              v: 1,
              type: "warning",
            },
            {
              l: "日常报销",
              v: 2,
              type: "danger",
            },
            {
              l: "用户提现",
              v: 3,
            },
          ],
        },
        {
          label: "银行卡账号",
          mode: "cardNo",
          align: "center",
        },
        {
          label: "发卡银行",
          mode: "bank",
          align: "center",
          isSwitch: false,
          width: "70%",
        },
        {
          label: "户名",
          mode: "name",
          align: "center",
        },
        {
          label: "手机号",
          mode: "phone",
          align: "center",
        },

        {
          label: "用户昵称",
          mode: "nickname",
          align: "center",
        },
        {
          label: "核算人",
          mode: "userId",
          align: "center",
        },
        {
          label: "核算时间",
          mode: "updateTime",
          align: "center",
        },
        {
          label: "状态",
          mode: "status",
          align: "center",
          // isSwitch: false,
          options: [
            {
              l: "报错",
              v: -1,
              type: "danger",
            },
            {
              l: "待出账",
              v: 1,
              type: "warning",
            },
            {
              l: "出账成功",
              v: 2,
            },
          ],
        },
      ],
      tableList: [],
      paging: {
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      },
      comTableConfig: {
        loading: false,
      },
      //------- Button -------//

      comMb8ButtonConfig_Table: [
        {
          label: "确认",
          type: "primary",
          icon: "",
          vHasPermi: "",
          disabled: false,
          btnId: "confirm",
        },
        {
          label: "报错",
          type: "danger",
          icon: "",
          vHasPermi: "",
          disabled: false,
          btnId: "error",
        },
        {
          label: "明细",
          type: "",
          icon: "",
          vHasPermi: "",
          disabled: false,
          btnId: "info",
        },
      ],
      //------- 查询条件数组 -------//
    };
  },

  mounted() {
    this.getPayListFn(this.paging);
  },

  methods: {
    // 明细
    async detailFn(row) {
      const result = await getPayGetInfo({ id: row.idStr });
      console.log(result);
    },
    // 结算价格
    async settlementFn(row, status) {
      let { msg, code } = await getPayUpdateStatus([{ id: row.idStr, status }]);
      if (code === 200) {
        this.$message({
          type: "success",
          message: msg,
        });
        this.getPayListFn();
      }

      // console.log(row);
    },
    /* 前段逻辑 */
    //------- 分页 -------//
    // pageSize 改变时会触发	每页条数
    handleSizeChange(val) {
      this.paging.pageSize = val;
      this.getPayListFn(this.paging);
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      this.paging.pageNum = val;
      this.getPayListFn(this.paging);
    },

    //重置form事件
    resetFn() {
      this.comSelectOptions.value = "";
      this.paging = {
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      };
    },
    // 筛选数据
    queryFn(arr) {
      console.log(arr);

      arr.forEach((item) => {
        for (const key in item) {
          this.paging[key] = item[key];
        }
        if (item.temp instanceof Array) {
          this.paging.startTime = item.temp[0].split(" ")[0];
          this.paging.endTime = item.temp[1].split(" ")[0];
        }
      });

      this.paging;
      console.log(this.paging, "查询");
      this.paging.pageNum = 1;
      this.getPayListFn(this.paging);
    },
    //------- 按钮组 -------//
    //顶部按钮组
    clickBtnGroup_btnBox(btnType, btnId) {
      console.log(btnType, btnId);
    },
    //表格操作栏按钮组 g
    clickBtnGroup_Table(g, row) {
      if (g == "confirm") {
        /* 确认 */
        this.$confirm("是否确认?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let updataData = [{ id: row.idStr, status: "0" }];
            this.updateWageInfoStatus_ById(updataData);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "操作取消",
            });
          });
      } else if (g[1] == "info") {
        /* 明细 */
        let data = {
          id: row.idStr,
          employeeId: row.employeeIdStr,
          eName: row.ename,
          status: row.status,
        };
        this.$router.push({
          path: "/fnancialPlatform/accountingManagemen/salaryDetails",
          query: { data: JSON.stringify(data) },
        });
      }
    },

    //------- 获取 工资提成 列表 -------//
    async getPayListFn(data) {
      this.comTableConfig.loading = true;
      let result = await getPayList(this.paging);
      console.log(result, "返回的数据");
      if (result.code == "200") {
        this.tableList = result.rows;
        //修饰状态码
        this.tableList.forEach((item) => {
          //是否有这个属性

          this.dynamicFilter.type ? "" : (this.dynamicFilter.type = []);

          if (!this.dynamicFilter.type.includes(item.type)) {
            this.dynamicFilter.type.push(item.type);
          }
        });
        // 动态生成筛选状态
        this.comForm.modes.forEach((item) => {
          switch (item.mode) {
            case "type":
              item.select = this.arrTransformObj(this.dynamicFilter.type, [
                "",
                "工资提成",
                "日常报销",
                "用户体现",
              ]);
              break;

            default:
              break;
          }
        });
        this.paging.total = result.total;
        this.comTableConfig.loading = false;
      }
    },
    changeSelectFn(Val) {
      this.paging.status = Val;
      this.getPayListFn();
    },
    //------- 修改 工资提成 状态修改 -------//
    async updateWageInfoStatus_ById(data) {
      this.comTableConfig.loading = true;
      console.log(data);
      let result = await updateWageInfoStatus_ById(data).then((res) => res);
      console.log(result);
      if (result.code == "200") {
        this.getPayListFn(this.paging);
        this.$message({
          type: "success",
          message: "操作成功",
        });
      } else {
        this.$message({
          type: "info",
          message: result,
        });
        this.comTableConfig.loading = false;
      }
      this.comTableConfig.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  .top-box {
    .select {
      padding-bottom: 10px;
    }
    .form {
      padding-top: 10px;
    }
    .btn-box {
      display: inline-block;
      padding-bottom: 10px;
    }
  }
  ::v-deep .mb8 {
    //样式穿透
    margin-bottom: 0px;
  }
}
</style>